<template>
  <div class="dashboard-container">
    <div class="app-container">
      <template>
        <div class="dashboard-container">
          <div class="app-container">
            <page-tools :show-before="true">
              <span slot="before">共{{ total }}条记录</span>
              <template slot="after">
                <el-button size="small" type="warning" @click="$router.push('/employees/import')">导入</el-button>
                <el-button size="small" type="danger" @click="exportExcelClick">导出</el-button>
                <el-button size="small" type="primary" @click="isShowDialog = true">新增员工</el-button>
              </template>
            </page-tools>
            <!-- 放置表格和分页 -->
            <el-card>
              <el-table border :data="list">
                <el-table-column label="序号" prop="index" sortable="" />
                <el-table-column label="姓名" prop="username" sortable="" />
                <el-table-column label="工号" prop="workNumber" sortable="" />
                <el-table-column label="聘用形式" prop="formOfEmployment" sortable="" :formatter="formOfEmployment" />
                <el-table-column label="部门" prop="departmentName" sortable="" />
                <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
                  <!-- 因为默认渲染数据，无法对数据直接进行操作，需要使用插槽来做数据处理 -->
                  <template v-slot="{row}">
                    <!-- 使用vue的过滤器方法来对日期数据进行处理，注意点时需要管道符号来做传参(vue内置的 | 运算符号) -->
                    <!-- 管道运算符：value(需要过滤的数据)｜function(过滤函数) 意思是管道符号前数据传递给后面过滤函数，函数接收做相应处理-->
                    {{ row.timeOfEntry | formatDate }}
                  </template>
                </el-table-column>
                <el-table-column label="账户状态" prop="enableState" sortable="">
                  <!-- 使用v-slot来获取数据，解构数据 -->
                  <template v-slot="{row}">
                    <!-- 自定义switch开关插槽 -->
                    <el-switch
                      v-model="row.enableState"
                      disabled
                      active-color="#13ce66"
                      inactive-color="#ccc"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="280">
                  <template v-slot="{row}">
                    <!-- 使用路由传参方式传递对应的员工id 方式1：/id,方式2：?id=id -->
                    <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
                    <el-button type="text" size="small">转正</el-button>
                    <el-button type="text" size="small">调岗</el-button>
                    <el-button type="text" size="small">离职</el-button>
                    <el-button type="text" size="small" @click="showRoleDialog(row.id)">角色</el-button>
                    <el-button type="text" size="small" @click="delEmployeeClick(row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <el-row type="flex" justify="center" align="middle" style="height: 60px">
                <el-pagination
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pageConfig.size"
                  @current-change="currentChange"
                />
              </el-row>
            </el-card>
          </div>
        </div>
      </template>
      <!-- 使用新增员工弹窗组件 -->
      <add-emplovee :is-show-dialog="isShowDialog" :get-employee-list="getEmployeeList" @onClose="onClose" />
      <!-- 使用新增员工弹窗组件 -->

      <!-- 使用分配角色弹窗组件 -->
      <AssignRole ref="assignRole" :is-show-role-dialog="isShowRoleDialog" @onRoleClose="onRoleClose" />
      <!-- 使用分配角色弹窗组件 -->
    </div>
  </div>
</template>

<script>
// 导入获取员工综合数据请求接口
import { getEmployeeListAPI, delEmployeeAPI } from '@/api/employees'
// 导入枚举数据
import EmployeeEnum from '@/constant/employees'
// 引入导出函数
import { export_json_to_excel } from '@/vendor/Export2Excel'
// 导入事件处理函数，过滤器中的时间处理函数
import { formatDate } from '@/filters'
// 导入弹窗子组件
import AddEmplovee from '@/views/employees/components/add-employee.vue'
// 引入组件
// import PageTools from '@/components/PageTools'
// 引入分配角色组件
import AssignRole from './components/assign-role.vue'
export default {
  // 注册组件
  components: {
    // PageTools
    AddEmplovee,
    AssignRole
  },
  data() {
    return {
      // 员工综合数据
      list: [],
      // 员工总数
      total: 0,
      // 请求页数与每页条数
      pageConfig: {
        page: 1,
        size: 5
      },
      // 控制新增编辑弹窗子组件值
      isShowDialog: false,
      // 控制分配角色弹窗组件值
      isShowRoleDialog: false
    }
  },
  created() {
    // 组件创建完成后调用渲染函数渲染页面
    this.getEmployeeList()
  },
  methods: {
    // 删除员工点击事件函数
    async delEmployeeClick(id) {
      // 再次询问是否删除
      await this.$confirm('确定要删除此员工数据吗？')
      // 调用接口发送删除请求
      await delEmployeeAPI(id)
      // 删除成功弹窗提示
      this.$message.success('删除员工信息成功！')
      // 调用渲染函数重新刷新页面
      this.getEmployeeList()
    },
    // 获取员工综合数据函数
    async getEmployeeList() {
      // 发送请求
      const { rows, total } = await getEmployeeListAPI(this.pageConfig)
      // 接收返回的数据暂存到date对应的数据中
      // 这里会对序号进行处理，使用数组map方法映射，添加一个index索引，同时需要与分页数据进行绑定
      this.list = rows.map((item, index) => {
        return {
          ...item,
          // 当前页面-1*每页显示数量+数组下标+1(因为开始时1，不加1就是0开始)
          index: (this.pageConfig.page - 1) * (this.pageConfig.size) + index + 1
        }
      })
      this.total = total
    },
    // 监听点击分页时页码的变化
    currentChange(newPage) {
      // 将新的页码赋值给旧的页码
      this.pageConfig.page = newPage
      // 调用渲染函数重新渲染页面
      this.getEmployeeList()
    },
    // 处理聘用方式数据函数formatter
    formOfEmployment(row, col, val) {
      // 使用三元运算符来处理，不过会有缺陷，只能判断两种情况，当然也可以使用if else，但是也比较复杂
      // return val === 1 ? '正式' : '非正式'
      // 这里我们可以使用枚举方法，将所有的可能性列举出来，再进行匹配
      // const arr = [
      //   { id: 1, vale: '正式' },
      //   { id: 2, vale: '非正式' },
      //   { id: 3, vale: '临时' },
      //   { id: 4, vale: '实习生' }
      // ]
      // const res = arr.find(item => item.id === val)
      // return res ? res.vale : '未知'
      // 单独封装文件来存放枚举数据，然后导入使用枚举数据
      const res = EmployeeEnum.hireType.find(item => item.id === val)
      return res ? res.value : '未知'
    },
    // 导出员工数据点击事件
    async exportExcelClick() {
      // 1. 获取所有员工数据
      const { rows } = await getEmployeeListAPI({
        page: 1,
        size: this.total
      })
      // 因为后端返回的数据与导出Excel文件格式不匹配，所以需要对数据进行处理,需要与表头数据一一匹配
      // [{},{},{}] 后端返回数据格式
      // 使用map方法转换
      // [[],[],[]] 转成二维数组格式
      // 定义表头字段
      const header = ['用户名', '工号', '手机号', '部门', '聘用形式', '入职日期']
      const data = rows.map(item => {
        const arr = []
        // 根据表头序列来逐个添加排序
        arr.push(item.username)
        arr.push(item.workNumber)
        arr.push(item.mobile)
        arr.push(item.departmentName)

        // 使用枚举数据来处理聘用形式数据，将数值转译成字符串，同时需要判断非空状态
        const obj = EmployeeEnum.hireType.find(el => el.id === item.formOfEmployment)
        const formOfEmployment = obj ? obj.value : '未知'
        arr.push(formOfEmployment)

        // 对入职时间格式进行处理，因为js无法使用vue的过滤器方法(管道运算符 | ),所以需要单独引入过滤器文件中的函数formatDate
        arr.push(formatDate(item.timeOfEntry))
        // 返回数组
        return arr
      })

      // 2. 转成 excel 文件供用户下载
      export_json_to_excel({
        header: header, // 表头 必填
        // 具体表格数据 必填
        data: data,
        filename: '员工数据表', // 非必填 导出文件名
        autoWidth: true, // 非必填，单元格是否要自适应宽度
        bookType: 'xlsx' // 非必填，导出文件类型
      })
    },
    // 接收弹窗组件发送的关闭弹窗请求函数
    onClose() {
      this.isShowDialog = false
    },

    // 分配角色点击事件函数
    async  showRoleDialog(id) {
      // 调用角色分配组件回显角色分配信息函数同步已有的角色权限
      await this.$refs.assignRole.getUserDetail(id)
      // 显示弹窗
      this.isShowRoleDialog = true
      // 暂存id，再通过组件传递给角色弹窗组件
      this.userId = id
    },
    // 子组件请求关闭角色分配组件弹窗
    onRoleClose() {
      this.isShowRoleDialog = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__header{
  background: -webkit-linear-gradient(left,#00b09b, #96c93d);
}

</style>
